docs/app/components/BadgeGenerator.vue (1)

1-1: Add TypeScript to the script block.

The coding guidelines require following TypeScript conventions for .vue files. Adding lang="ts" enables type checking and improves maintainability.

♻️ Suggested change

-<script setup>
+<script setup lang="ts">

As per coding guidelines: **/*.{ts,tsx,vue}: Follow standard TypeScript conventions and best practices.

docs/app/components/BadgeGenerator.vue (1)

1-5: Consider adding TypeScript for type safety.

The <script setup> block lacks lang="ts". Adding TypeScript would provide better type safety for the reactive state and function signatures, aligning with the coding guidelines for .vue files.

-<script setup>
+<script setup lang="ts">
 const pkg = useState('badge-pkg', () => 'nuxt')
 const type = useState('badge-type', () => 'version')
-const isValid = ref(true)
-const copied = ref(false)
+const isValid = ref<boolean>(true)
+const copied = ref<boolean>(false)

docs/app/components/BadgeGeneratorParameters.vue (2)

1-11: Consider adding TypeScript and reducing duplication with BadgeGenerator.vue.

Both components share the same types array, copyToClipboard pattern, and state keys (badge-pkg, badge-type). Consider:

1. Adding lang="ts" for type safety
2. Extracting shared constants/utilities to a composable or shared module

-<script setup>
+<script setup lang="ts">
+// Consider extracting to a shared composable:
+// import { useBadgeGenerator, BADGE_TYPES } from '~/composables/useBadgeGenerator'

---

234-243: Consider adding an accessible label for the toggle.

The checkbox toggle for "Use package name as label" uses sr-only for the input but lacks an id/for association or aria-label. Screen reader users may have difficulty understanding the toggle's purpose.

♿ Suggested improvement

-      <label class="relative inline-flex items-center cursor-pointer group">
-        <input v-model="usePkgName" type="checkbox" class="sr-only peer" />
+      <label for="use-pkg-name-toggle" class="relative inline-flex items-center cursor-pointer group">
+        <input id="use-pkg-name-toggle" v-model="usePkgName" type="checkbox" class="sr-only peer" />

docs/app/components/BadgeGeneratorParameters.vue (1)

132-134: Consider using colon syntax for UnoCSS icons.

The icons use dash-separated syntax (i-lucide-chevron-down, i-lucide-alert-circle). Per project conventions, colon syntax aids UnoCSS in resolving the correct collection directly.

♻️ Suggested changes

-            class="absolute right-3 top-1/2 -translate-y-1/2 i-lucide-chevron-down w-4 h-4 text-gray-400 pointer-events-none"
+            class="absolute right-3 top-1/2 -translate-y-1/2 i-lucide:chevron-down w-4 h-4 text-gray-400 pointer-events-none"

-            class="i-lucide-alert-circle w-3.5 h-3.5 text-red-500 ml-1"
+            class="i-lucide:alert-circle w-3.5 h-3.5 text-red-500 ml-1"

Apply the same pattern at line 238.

Based on learnings: "In Vue components that use UnoCSS with the preset-icons collection, prefer colon-syntax for icons (e.g., i-carbon:checkmark) over the dash-separated form."

Also applies to: 212-215, 236-239

docs/app/components/BadgeGenerator.vue (1)

88-90: Consider colon syntax for UnoCSS icon.

♻️ Suggested change

-          class="absolute right-3 top-1/2 -translate-y-1/2 i-lucide-chevron-down w-4 h-4 text-gray-400 pointer-events-none"
+          class="absolute right-3 top-1/2 -translate-y-1/2 i-lucide:chevron-down w-4 h-4 text-gray-400 pointer-events-none"

Based on learnings: "prefer colon-syntax for icons (e.g., i-carbon:checkmark) over the dash-separated form."